<template>
    <view class="container">
        <u-tabs
            :list="tabList"
            :current="current"
            inactiveStyle="#828D99"
            :font-size="30"
            :scrollable="false"
            lineColor="transparent"
            :class="'u-tabs__wrapper__nav__item-active-'+current"
            :activeStyle="{
                color: '#016EFF',
                fontWeight: 'bold',
                transform: 'none'
            }"
            :show-bar="false"
            lineWidth="50%"
            name="name"
            @change="handleTab"
        ></u-tabs>
        <view v-if="current === 0" class="screen_list">
            <Tree
                v-if="list && list.length > 0"
                ref="tree"
                :range="list"
                :rangeKey="rangeKey"
                :idKey="idKey"
                :title="title"
            />
            <view class="empty_img">
                <image src="../../../static/images/empty.svg" v-if="list && list.length === 0"></image>
            </view>
        </view>
        <view v-else class="screen_list">
            <view
                class="screen"
                v-for="(item, index) in processList"
                :key="index">
                <view class="info">
                    <text>{{ item.labelName }}</text>
                    <text>{{ item.fieldName}}</text>
                    <!-- <text>{{ item.postName }}</text> -->
                </view>
                <view @click="collectionFn(item)">
                    <u-button class="subscribe_btn" :text="item.subscribe ? '已关注' : '关注'" size="mini" type="primary" :plain="!item.subscribe"></u-button>
                </view>
            </view>
    
            <view class="empty_img">
                <image src="../../../static/images/empty.svg" v-if="processList && processList.length === 0"></image>
            </view>
        </view>
    </view>
</template>

<script>
import Tree from "@/components/tree/labelTree.vue";
export default {
    components: {
        Tree,
    },
    data() {
        return {
            tabList: [{name: '标签列表'}, {name: '我的关注'}],
            current: 0,

            result: null,
            list: [],

            processList: [],

            // 指定 Object 中 key 的值作为选择器显示的内容
            // 比如:{ id:1, name: '树1' }, { id: 2, name: '树2' }
            // name就是要显示到界面上的key
            rangeKey: "name",

            // 指定 Object 中 key 的值作为单条数据的唯一id
            // 跟上面的类似,一个道理，只不过这个是标识的唯一id键名
            idKey: "id",

            // 标题
            title: "这是标题",
        };
    },
    mounted() {
        this.getList()
        this.getProcessList()
    },
    methods: {
        handleTab(item) {
            console.log(item.index)
            this.current = item.index;
            if (this.current === 0) {
                this.getList()
            } else {
                this.getProcessList()
            }
        },
        collectionFn(item) {
            if (item.subscribe) {
                this.$request({
                    url: '/knowledgeLabel/unsubscribe',
                    method: 'post',
                    data: {id: item.id}
                }).then(({ data }) => {
                    this.$modal.loading('已取消关注')
                    setTimeout(()=> {
                        this.$modal.closeLoading()
                    }, 1000)
                })
            } else {
                this.$request({
                    url: '/knowledgeLabel/subscribe',
                    method: 'post',
                    data: {id: item.id}
                }).then(({ data }) => {
                    this.$modal.loading('关注成功')
                    setTimeout(()=> {
                        this.$modal.closeLoading()
                    }, 1000)
                })
            }
            item.subscribe = !item.subscribe;
        },
        getList() {
			this.$modal.loading('加载中···')
            this.$request({
                url: '/knowledgeLabel/app/list',
                method: 'get',
                params: {}
            }).then(({ data }) => {
                setTimeout(()=> {
                    this.$modal.closeLoading()
                }, 1000)
                this.list = data.data
            }).catch(() => {
                setTimeout(()=> {
                    this.$modal.closeLoading()
                }, 1000)
			})
        },
        getProcessList() {
			this.$modal.loading('加载中···')
            this.$request({
                // url:'/knowledgeLabel/myFocus',
                url: '/knowledgeLabel/app/myLabelList',
                method: 'get',
                params: {}
            }).then(({ data }) => {
                this.processList = data
                setTimeout(()=> {
                    this.$modal.closeLoading()
                }, 1000)
            }).catch(() => {
                setTimeout(()=> {
                    this.$modal.closeLoading()
                }, 1000)
			})
        }
    },
};
</script>


<style lang="scss" scoped>
.container {
    padding: 40rpx 30rpx;
    .screen_list {
        width: 100%;
        padding: 20rpx 0;
        .screen {
            display: flex;
            height: 80rpx;
            //border-bottom: 1px dashed #8f8f94;
            align-items: center;
            padding: 10rpx 40rpx;
            background: #ffffff;
            justify-content: space-between;
            &:hover,&:active{
                background: rgba(232, 248, 255, 1);
            }
            .info {
                font-family: Source Han Sans;
                font-size: 28rpx;
                text:nth-child(1) {
                    margin-right: 20rpx;
                    color: #1C2126;
                }
                text:nth-child(2) {
                    color: #4C5A67;
                }
            }
        }
        .empty_img{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            image{
                width: 224rpx;
                height: 338rpx;
            }
        }
    }
}
::v-deep .u-tabs{
    background: #FFFFFF;
    font-family: Source Han Sans;
    font-size: 30rpx;
    font-weight: 500;
}
::v-deep .u-tabs__wrapper__nav__item{
    width: 50%;
    height: 72rpx !important;
    color: #1C2126;
}
.u-tabs__wrapper__nav__item-active-0{
    ::v-deep .u-tabs__wrapper__nav__item-0{
        position: relative;
        &:after{
            content: '';
            height: 4rpx;
            width: 104rpx;
            position: absolute;
            bottom: 0;
            background: #0084FF;
        }
    }
}
.u-tabs__wrapper__nav__item-active-1{
    ::v-deep .u-tabs__wrapper__nav__item-1{
        position: relative;
        &:after{
            content: '';
            height: 4rpx;
            width: 104rpx;
            position: absolute;
            bottom: 0;
            background: #0084FF;
        }
    }
}
.subscribe_btn{
    font-family: 思源黑体;
    font-size: 24rpx;
    border-radius: 12rpx;
    &:after{
        border: none;
    }
    &::v-deep.u-button--plain.u-button--primary{
        color: #4C5A67;
        border-color: #EAECEF;
    }
}
</style>